<script setup lang="js">
import {ref} from 'vue';
import {NewsList, NewsAdd} from '@/api/news';
import {Plus} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {useAccountStore} from "@/stores/accountInfo";

const tableData = ref([])

const account = useAccountStore()

const news = ref({
  creatorId: account.currentInfo.id,
  title: '',
  pageNo: 1,
  pageSize: 10,
  total: 10,
  url: '',
  clazz: '',
})

const options = [
  {
    value: '政治',
    label: '政治',
  },
  {
    value: '娱乐',
    label: '娱乐',
  },
  {
    value: '地理',
    label: '地理',
  },
  {
    value: '历史',
    label: '历史',
  },
  {
    value: '军事',
    label: '军事',
  },
]

const getNewsList = ()=>{
  NewsList(news.value).then(res=>{
    tableData.value = res.data.records
    news.value.total = res.data.total
  })
}
getNewsList()

const PageSizeChange = (value) => {
  news.value.pageSize = value
  getNewsList()
}
const PageCurrentChange = (value) => {
  news.value.pageNo = value
  getNewsList()
}

const dialogVisible = ref(false)

const addNews = ()=>{
  dialogVisible.value = false
  NewsAdd(news.value).then(res=>{
    if (res.data){
      ElMessage({
        message: '添加成功',
        type: 'success',
      })
    }
    else {
      ElMessage.error('添加失败，新闻存在敏感词')
    }
  })
}

</script>

<template>
  <div>
    <el-row>
      <el-col :span="20">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="标题">
            <el-input v-model="news.title" placeholder="请输入标题名字" clearable />
          </el-form-item>
          <el-form-item label="分类">
<!--            <el-input v-model="news.clazz" placeholder="请输入分类名字" clearable />-->
            <el-select v-model="news.clazz" placeholder="类别" style="width: 240px">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getNewsList">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <v-if v-if="account.currentRole === 'admin'">
        <el-col :span="4" style="text-align: right">
          <el-button @click="dialogVisible = true" type="primary">
            添加新闻
          </el-button>
          <el-dialog
              v-model="dialogVisible"
              title="添加新闻"
              width="500"
              :before-close="handleClose"
          >
            <span>
              <el-form-item label="新闻链接">
              <el-input v-model="news.url" />
              </el-form-item>
              <br>
              <el-form-item label="分类">
              <el-select v-model="news.clazz" placeholder="类别" style="width: 240px">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
              </el-form-item>
            </span>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addNews">
                  确认
                </el-button>
              </div>
            </template>
          </el-dialog>
        </el-col>
      </v-if>
    </el-row>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="title" label="标题" />
      <el-table-column show-overflow-tooltip="true" prop="content" label="内容（显示部分，若需求完整内容请点击详情查看)"/>
      <el-table-column prop="url" label="详情">
        <template #default="scope">
          <a :href="scope.row.url" style="color: brown;" target="_blank">跳转</a>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
          v-model:current-page="PageNo"
          v-model:page-size="PageSize"
          :page-sizes="[1, 2, 5, 10]"
          :size="size"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="news.total"
          @size-change="PageSizeChange"
          @current-change="PageCurrentChange"
      />
    </div>
  </div>

<!--    <el-pagination-->
<!--        :page-size="20"-->
<!--        :pager-count="11"-->
<!--        layout="prev, pager, next"-->
<!--        :total="1000"-->
<!--    />-->
<!--  </div>-->
</template>

<style scoped lang="scss">


</style>